<template>
  <div class="container">
    <div class="topbg">
      <img src="@/assets/images/profile/topbg-image.png" alt="">
    </div>
    <div class="profile-page">
      <div class="user-block">
        <div class="users">
          <div class="left animate__fadeInUp animate__delay-2">
            <img class="avatar" src="@/assets/images/profile/touxiang.png" alt="">
          </div>
          <div class="right animate__fadeInUp animate__delay-2">
            <div class="name">
              <div class="text">{{store.userInfo.username}}</div>
              <!-- <div class="edit" @click="updateInfo"></div> -->
            </div>
            <div class="mobile">{{store.userInfo.phone}}</div>
          </div>
        </div>
        <div class="vip-block animate__fadeInUp animate__delay-1">
          <div class="left normal">
            <img src="@/assets/images/profile/vip.png" alt="">
          </div>
          <div class="right" @click="openViop">开通会员</div>
        </div>
      </div>
      <div class="profile-main">
        <div class="profile-main-suanli animate__fadeInUp animate__delay-1">
          <div class="left">
            <img class="icon" src="@/assets/images/profile/suanli.png" alt="">
            <div class="suanlizi">算力值</div>
            <div class="balance">{{store.computeBalance}}</div>
          </div>
          <div class="right" @click="recharge">
            <div class="text">充值</div>
            <img class="icon" src="@/assets/images/profile/chongzhi.png" alt="">
          </div>
        </div>
        <div v-if="store.userInfo.invited" class="profile-main-items animate__fadeInUp animate__delay-2">
          <div class="left">邀请码</div>
          <div class="left">{{store.userInfo.invited}}</div>
        </div>
        <div class="profile-main-items animate__fadeInUp animate__delay-3" @click="password">
          <div class="left">修改密码</div>
          <img class="right" src="@/assets/images/profile/youjiantou.svg" alt="">
        </div>
        <!-- <div class="profile-main-items animate__fadeInUp animate__delay-3" @click="feedback">
          <div class="left">意见反馈</div>
          <img class="right" src="@/assets/images/profile/youjiantou.svg" alt="">
        </div> -->
        <!-- <div class="profile-main-items animate__fadeInUp animate__delay-4">
          <div class="left">设置</div>
          <img class="right" src="@/assets/images/profile/youjiantou.svg" alt="">
        </div> -->
        <div class="profile-main-items animate__fadeInUp animate__delay-5" @click="LogOut">
          <div class="left">退出登录</div>
          <img class="right" src="@/assets/images/profile/youjiantou.svg" alt="">
        </div>
      </div>
    </div>
    <!-- 确认弹窗 -->
    <GlobalDialog
      v-model="LogOutDialog"
      title="确定退出登录吗？"
      message="若确定退出登录，将清除本地存储的用户信息，请确认是否退出登录"
      cancelText="再想想"
      confirmText="确定退出"
      @confirm="confirmLogOut"
      @cancel="() => console.log('用户取消退出')"
    >
    </GlobalDialog>
    <!-- 全局弹窗组件 -->
    <GlobalDialog
      v-model="showDialog"
      title="算力余额不足"
      :message="`您当前的算力余额为${store.computeBalance}，请先充值后再使用`"
      cancelText="知道了"
      confirmText="去充值"
      :show-cancel="true"
      :show-remember-option="true"
      remember-key="compute-balance-reminder"
      remember-text="不再提醒"
      @confirm="handleDialogConfirm"
      @cancel="handleDialogCancel"
    >
    </GlobalDialog>
    <SuanliDialog
      v-model="showSuanliDialog"
      :type="showSuanliDialogType"
      :message="`您当前的算力余额为${store.computeBalance}，请先充值后再使用`"
      :show-cancel="true"
    >
    </SuanliDialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from "@/stores/data";

import GlobalDialog from '@/components/GlobalDialog.vue';
import SuanliDialog from '@/components/SuanliDialog.vue';
import { useChatWS } from "@/composables/useChatWS";

const chat = useChatWS();
const store = useStore();
const router = useRouter()

const showDialog = ref(false); // 控制算力提示弹窗显示
const showSuanliDialog = ref(false); // 控制算力充值弹窗显示
const showSuanliDialogType = ref('cz'); // 弹窗展示类型，vip为会员展示，cz为算力充值展示


const ishide = ref(false)
const isTsShow = ref(false)
const name = ref('')
const mobile = ref('')
const uhostBalance = ref(0)
const isPrompt = ref(false)
const LogOutDialog = ref(false)

// 页面加载完成后执行动画
onMounted(() => {
  store.getProfile()
  // 显示算力不足弹窗
  if(store.computeBalance <= 30) showDialog.value = true;
});

// 算力弹窗处理方法
const handleDialogConfirm = () => {
  showDialog.value = false;
  showSuanliDialog.value = true;
};


const maskPhone = (phone) => {
  return phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
}

const updateInfo = () => {
  router.push('/profile/userInfo')
}

const openViop = () => {
  showSuanliDialogType.value = 'vip'
  showSuanliDialog.value = true
}

const recharge = () => {
  showSuanliDialogType.value = 'cz'
  showSuanliDialog.value = true
}

const password = () => {
  router.push('/updata-password')
}

const feedback = () => {
  router.push('/profile/feedback')
}

const LogOut = () => {
  LogOutDialog.value = true
}
const confirmLogOut = () => {
  // 清除本地存储的用户信息
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  localStorage.removeItem('computeBalance')
  // 重置 store 中的用户信息
  store.userInfo = {}
  store.computeBalance = 0
  // 关闭 WebSocket 连接（如果存在）
  if (chat && chat.close) {
    chat.close()
  }
  // 关闭弹窗
  LogOutDialog.value = false
  // 跳转到登录页面
  router.replace('/login')
}

</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: #F6FAFF;
}
.topbg {
  position: absolute;
  left: 0;
  top: 0;
  width: 430px;
  height: 445px;
  background: linear-gradient(90deg, #006CFF 0%, #009FFF 100%);
  img {
    width: 100%;
    height: 100%;
  }
}
.profile-page {
  position: absolute;
  top: 97px;
  left: 0;
  width: 100%;
}
.user-block {
  width: 398px;
  height: 158px;
  background: #FFFFFF;
  border-radius: 20px;
  margin: 0 17px;
  margin-bottom: 20px;
  .users {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .left {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      border: 2px solid #FFFFFF;
      position: absolute;
      top: -11px;
      left: 25px;
      .avatar {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      margin-left: 110px;
      margin-top: 12px;
      .name {
        display: flex;
        align-items: center;
        .text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #1A1A1A;
          line-height: 22px;
        }
        .edit {
          margin-left: 10px;
          width: 18px;
          height: 18px;
          background: url(@/assets/images/index/live/edit.png);
          background-size: 100% 100%;
        }
      }
      .mobile {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #595959;
        line-height: 22px;
      }
    }
  }
  .vip-block {
    background: url(@/assets/images/profile/vipbg.png);
    width: 366px;
    height: 67px;
    background: linear-gradient(92deg, #010A1B 0%, #002961 100%);
    border-radius: 10px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 21px;
    padding-right: 17px;
    box-sizing: border-box;
    .left.normal {
      padding-left: 5px;
      img {
        width: 42px;
        height: 19px;
      }
    }
    .right {
      width: 82px;
      height: 26px;
      line-height: 26px;
      background: linear-gradient(86deg, #FEFDE8 0%, #FFECDE 100%);
      border-radius: 33px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #D57F1C;
      text-align: center;
    }
  }
}
.profile-main {
  width: 100%;
  background: #F6FAFF;
  border-radius: 20px;
  padding: 20px 16px;
  box-sizing: border-box;
  &-suanli {
    width: 398px;
    height: 79px;
    background: #E4F2FD;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 19px;
    padding-right: 16px;
    box-sizing: border-box;
    margin-bottom: 20px;
    .left {
      display: flex;
      align-items: center;
      .icon {
        width: 19px;
        height: 19px;
      }
      .suanlizi {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #006CFF;
        line-height: 22px;
        margin-left: 5px;
        margin-right: 24px;
      }
      .balance {
        height: 22px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 30px;
        color: #006CFF;
        line-height: 22px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #006CFF;
        line-height: 22px;
        margin-right: 4px;
      }
      .icon {
        width: 13px;
        height: 13px;
      }
    }
  }
  &-items {
    width: 398px;
    height: 55px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 19px;
    margin-bottom: 20px;
    box-sizing: border-box;
    .left {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #00042D;
      line-height: 16px;
    }
    .right {
      width: 7px;
      height: 14px;
    }
  }
}

.alert {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: -60px;
  width: 100%;
  &-item.round {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: url(@/assets/images/login/radio.png);
    background-size: 100% 100%;
  }
  &-item.text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    margin-left: 7px;
  }
}
.alert.active {
  .round {
    background: url(@/assets/images/login/radio_active.png);
    background-size: 100% 100%;
  }
  .text {
    color: #006CFF;
  }
}
</style>